<template>
  <div class="home-container">
    <el-row class="header-row">
      <el-col :span="12" class="header-title-col">
        <h2>数据统计分析</h2>
      </el-col>
      <el-col :span="12" class="header-buttons">
        <el-button-group>
          <el-button size="small">今日</el-button>
          <el-button size="small">本周</el-button>
          <el-button size="small">本月</el-button>
          <el-button size="small">本季度</el-button>
          <el-button size="small">本年</el-button>
        </el-button-group>
      </el-col>
    </el-row>

    <el-row :gutter="20">
      <!-- 统计卡片 -->
      <el-col :span="6" v-for="(item, index) in statistics" :key="index">
        <el-card class="statistics-card" :body-style="{ padding: '20px' }">
          <div class="statistics-item">
            <div class="icon" :style="{ backgroundColor: item.color }">
              <i :class="item.icon"></i>
            </div>
            <div class="content">
              <div class="value">{{ item.value }}</div>
              <div class="label">{{ item.label }}</div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 图表区域 -->
    <el-row :gutter="20" class="chart-row">
      <el-col :span="24">
        <el-card class="chart-card">
          <div slot="header" class="card-header">
            <span>营业额趋势</span>
          </div>
          <div ref="chart1" class="chart"></div>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="20" class="chart-row">
      <el-col :span="12">
        <el-card class="chart-card">
          <div slot="header" class="card-header">
            <span>订单数量</span>
          </div>
          <div ref="chart2" class="chart"></div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card class="chart-card">
          <div slot="header" class="card-header">
            <span>服务类型分布</span>
          </div>
          <div ref="chart3" class="chart"></div>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="20" class="chart-row">
      <el-col :span="12">
        <el-card class="chart-card">
          <div slot="header" class="card-header">
            <span>会员增长趋势</span>
          </div>
          <div ref="chart4" class="chart"></div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card class="chart-card">
          <div slot="header" class="card-header">
            <span>门店营业额对比</span>
          </div>
          <div ref="chart5" class="chart"></div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 热门服务排行表格 -->
    <el-row :gutter="20" class="popular-services-row">
      <el-col :span="24">
        <el-card class="popular-services-card">
          <div slot="header" class="card-header">
            <span>热门服务排行</span>
          </div>
          <el-table :data="popularServices" style="width: 100%">
            <el-table-column prop="rank" label="排名" width="80"></el-table-column>
            <el-table-column prop="name" label="服务名称"></el-table-column>
            <el-table-column prop="count" label="服务次数"></el-table-column>
            <el-table-column prop="amount" label="销售额"></el-table-column>
            <el-table-column prop="proportion" label="占比"></el-table-column>
            <el-table-column prop="YoY" label="同比"></el-table-column>
          </el-table>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import * as echarts from 'echarts';
export default {
  name: "Index",
  data() {
    return {
      statistics: [
        {
          label: '今日预约',
          value: '12',
          icon: 'el-icon-date',
          color: '#409EFF'
        },
        {
          label: '用户总数',
          value: '1,234',
          icon: 'el-icon-user',
          color: '#67C23A'
        },
        {
          label: '本月收入',
          value: '¥12,345',
          icon: 'el-icon-money',
          color: '#E6A23C'
        },
        {
          label: '好评率',
          value: '98%',
          icon: 'el-icon-star-on',
          color: '#F56C6C'
        }
      ],
      popularServices: [
        { rank: 1, name: '精致洗车', count: 358, amount: '¥35,800', proportion: '28.2%', YoY: '+12.5%' },
        { rank: 2, name: '标准洗车', count: 285, amount: '¥22,800', proportion: '18.5%', YoY: '+8.3%' },
        { rank: 3, name: '内饰深度清洁', count: 162, amount: '¥19,440', proportion: '15.8%', YoY: '+15.2%' },
        { rank: 4, name: '车身抛光打蜡', count: 78, amount: '¥15,600', proportion: '12.5%', YoY: '-2.1%' },
        { rank: 5, name: '引擎舱清洗', count: 58, amount: '¥11,600', proportion: '9.5%', YoY: '+5.8%' }
      ]
    };
  },
  mounted() {
    this.initCharts();
  },
  methods: {
    initCharts() {
      // 初始化第一个图表
      const chart1 = echarts.init(this.$refs.chart1, 'dark');
      const option1 = {
        tooltip: {},
        xAxis: { data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] },
        yAxis: {},
        series: [{ name: '预约量', type: 'bar', data: [5, 20, 36, 10, 10, 20, 30] }]
      };
      chart1.setOption(option1);

      // 初始化第二个图表
      const chart2 = echarts.init(this.$refs.chart2, 'dark');
      const option2 = {
        tooltip: {},
        xAxis: { data: ['Q1', 'Q2', 'Q3', 'Q4'] },
        yAxis: {},
        series: [{ name: '预约量', type: 'line', data: [120, 200, 150, 80] }]
      };
      chart2.setOption(option2);

      // 初始化第三个图表
      const chart3 = echarts.init(this.$refs.chart3, 'dark');
      const option3 = {
        tooltip: {},
        xAxis: { data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'] },
        yAxis: {},
        series: [{ name: '收入', type: 'pie', radius: '50%', data: [{value: 335, name: 'Direct'}, {value: 310, name: 'Email'}, {value: 234, name: 'Union Ads'}, {value: 135, name: 'Video Ads'}, {value: 1548, name: 'Search Engine'}] }]
      };
      chart3.setOption(option3);

      // 初始化第四个图表
      const chart4 = echarts.init(this.$refs.chart4, 'dark');
      const option4 = {
        tooltip: {},
        xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] },
        yAxis: { type: 'value' },
        series: [{ data: [150, 230, 224, 218, 135, 147, 260], type: 'line' }]
      };
      chart4.setOption(option4);

      // 初始化第五个图表
      const chart5 = echarts.init(this.$refs.chart5, 'dark');
      const option5 = {
        tooltip: {},
        xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] },
        yAxis: { type: 'value' },
        series: [{ data: [820, 932, 901, 934, 1290, 1330, 1320], type: 'line' }]
      };
      chart5.setOption(option5);
    }
  },
};
</script>

<style scoped lang="scss">
.home-container {
  padding: 20px;
  overflow-y: auto; /* 添加垂直滚动 */
}

.header-row {
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  background-color: white;
  padding: 10px 20px;
  border-radius: 4px;
}

.header-title-col {
  text-align: left;
}

.header-buttons {
  text-align: right;
}

.statistics-card {
  margin-bottom: 20px;
}

.statistics-item {
  display: flex;
  align-items: center;
}

.icon {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 16px;
  color: white;
  font-size: 24px;
}

.content {
  flex: 1;
}

.value {
  font-size: 24px;
  font-weight: bold;
  color: #303133;
  line-height: 1;
  margin-bottom: 8px;
}

.label {
  font-size: 14px;
  color: #909399;
}

.chart-row {
  margin-top: 20px;
}

.chart-card {
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.chart-placeholder {
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f5f7fa;
  color: #909399;
  border-radius: 4px;
}

.chart {
  height: 300px; /* 设置图表容器高度 */
}

.popular-services-row {
  margin-top: 20px;
}

.popular-services-card {
  margin-bottom: 20px;
}
</style>

